<template>
	<view class="needbuy">
		<view class="uv-card">
			<uv-form :model="needform" labelWidth="80">
				<uv-form-item label="品牌车型" @click="tobrand">
					<uv-cell :title="needform.brand" isLink></uv-cell>
				</uv-form-item>
				<uv-form-item label="车源地要求" @click="showpopup">
					<uv-cell :title="`已选择${needform.location.length}个地区`" isLink style="font-size: 28upx;"></uv-cell>
				</uv-form-item>
				<uv-form-item label="其他要求">
					<uv-textarea v-model="needform.other" border="bottom" :customStyle="{padding: '0 12px'}"></uv-textarea>
				</uv-form-item>
				<uv-form-item label="联系电话">
					<uv-input v-model="needform.phone" border="bottom"></uv-input>
				</uv-form-item>
				<uv-form-item>
					<uv-button v-if="isUpdata" @click="handleUpdata" type="primary" shape='circle'>提交修改</uv-button>
					<uv-button v-else @click="handleSave" type="primary" shape='circle'>发布求购</uv-button>
				</uv-form-item>
			</uv-form>
		</view>
		<uv-popup ref="ref_location" mode="bottom" :round="15">
			<view class="local-popup">
				<view class="local-title text-df margin-bottom-sm text-center padding-tb">选择车源地</view>
				<view style="height:500upx; overflow:auto; padding:10upx 20upx;">
					<uv-checkbox-group v-model="checkboxValue" iconPlacement="right" placement="column" :borderBottom="true">
						<uv-checkbox v-for="item in province" :customStyle="{marginBottom: '16px'}" :key="item.name"
							:name="item.name" :label="item.name"></uv-checkbox>
					</uv-checkbox-group>
				</view>
				<view> 
				<view style="display: flex; justify-content: space-between; padding: 20upx 40upx 0 40upx;">
					<view>
						<block v-if="checkboxValue.length>0">
							<text class="text-sm text-gray">已选择：</text>{{checkboxValue.length}}个地区
						</block>
					</view>
					<uv-button type="primary" shape='circle' size="small" @click="confirmlocat">确定</uv-button>
				</view>

				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { uploadUserNeedBuyInfo, updateUserNeedBuyInfo } from '@/utils/http.js'
	export default {
		data() {
			return {
				needform: {
					brand: '',
					location: '',
					phone: '',
					other: '',
					istop: 0
				},
				isUpdata: false,
				checkboxValue: []
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				province: state => state.area.province
			}),

		},
		onLoad(option) {
			uni.$on('car_brand', this.setbrand)
			this.needform.phone = this.userInfo.phone
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('need_edit', this.handeledit)
		},
		methods: {
			handeledit(e) {
				this.needform = e.data
				this.isUpdata = true
			},
			handleUpdata() {
				updateUserNeedBuyInfo(this.needform).then(res => {
					const { code } = res
					if (code == 200) {
						uni.showToast({ title: '发布成功' })
						uni.navigateTo({ url: '/pages/mine/needlist' })
					}
				})
			},
			handleSave() {
				uploadUserNeedBuyInfo(this.needform).then(res => {
					const { code } = res
					if (code == 200) {
						uni.showToast({ title: '发布成功' })
						uni.navigateTo({ url: '/pages/mine/needlist' })
					}
				})
			},
			confirmlocat() {
				this.needform.location = this.checkboxValue
				this.$refs.ref_location.close()
			},
			showpopup() {
				this.$refs.ref_location.open()
			},
			tobrand() {
				uni.navigateTo({ url: '/pages/brand/brand?all=0' })
			},
			setbrand(e) {
				this.needform.brand = `${e.brand.name} ${e.series.name} ${e.car.cartype} `
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
	}
	.local-title{
		border-bottom: 1upx solid #d6d7d9;
	}
	.needbuy .uv-cell__left-icon-wrap{
		margin:0 !important;
	}
</style>